<template>
    <view class="container">
        <!-- 标题 -->
        <view class="tabs">
            <text @click="active = 0">我要买</text>
            <text @click="active = 1">我要卖</text>
            <text @click="active = 2">挂单</text>
        </view>
    
        <view v-show="active == 0" style="flex: 1">
            <load-refresh ref="loadRefresh" :isRefresh="true" heightReduce="200" refreshType="hollowDots" color="#04C4C4"  backgroundCover="#F3F5F5" :currentPage="currentPage" :totalPages="totalPages" @loadMore="loadMore" @refresh="refresh">
                <view slot="content-list">
                    <view class="list" v-for="item in 28" :key="item">
                        <view style="display: flex;justify-content: space-between;align-items: center;">
                            <view>
                                <view class="flex-content" style="flex: 1;">
                                    <image style="width: 44rpx;height: 44rpx;margin-right: 16rpx;" src="../../static/img/auth.png" mode="scaleToFill" />
                                    <text style="font-size: 26rpx;font-weight: 500;color: #333;">用户2234456</text>
                                </view>
                                <view style="margin-top: 14rpx;margin-bottom: 8rpx;">
                                    <text class="lable">成交量 4</text>
                                    <text class="lable">100% 成交率</text>
                                </view>
                            </view>
                            <view class="pay-btn" @click="handelClickPay">购买</view>
                        </view>
                        <view style="font-weight: 600;font-size: 24px;color: #333;line-height: 60rpx;"><text style="font-size: 20rpx;">¥</text>7.45</view>
                        <view class="flex-content">
                            <view class="text" style="margin-right: 12rpx;">数量</view>
                            <view class="text" style="font-weight:  500;color:#666666">13343.00 USDT</view>
                        </view>
                        <view class="flex-content">
                            <view class="text" style="margin-right: 12rpx;">限额</view>
                            <view class="text" style="margin-right:12rpx;font-weight: 500;color:#666666">13343.00-1000000</view>
                        </view>
                        <view class="flex-content">
                            <image style="width: 38rpx;height: 24rpx;margin-right: 8rpx;" src="../../static/img/yl_icon.png" mode="scaleToFill" />
                            <text class="text">银联</text>
                        </view>
                    </view>
                </view>
            </load-refresh>
        </view>
    
        <view v-show="active == 1" style="flex: 1;">
            <view class="card">
                <!-- 按数量区块 -->
                <view class="row-title">按数量</view>
                <view class="section">
                    <view class="flex-row">
                        <input class="form-input" style="font-size: 32rpx;font-weight: 500;" type="number" maxlength="10" placeholder="0.00" />
                        <view class="flex-between">
                            <text class="currency">USDT</text>
                            <text class="currency" style="color: #E7E8EB;"> ｜ </text>
                            <text class="currency" style="color: #FF5023;">最大</text>
                        </view>
                    </view>
                </view>
    
                <!-- 出售单价 -->
                <text class="row-title">出售单价</text>
                <view class="section">
                    <view class="flex-row">
                        <input class="form-input" placeholder="请输入出售单价" placeholder-class="placeholder" />
                        <text class="currency">CNY</text>
                    </view>
                </view>
    
                <!-- 单笔限额 -->
                <view class="row-title" style="display: flex;">
                    <text style="flex: 1;">单笔限额</text>
                    <text class="hint">可得：<text style="color: #FC4300;">0</text> USDT</text>
                </view>
                <view class="section" style="display: flex;">
                    <input class="form-input flex-row" style="width: 298rpx;" placeholder="请输入出售单价" placeholder-class="placeholder" />
                    <view style="width: 68rpx;"></view>
                    <view class="flex-row" style="width: 298rpx;">
                        <input class="form-input" placeholder="" placeholder-class="placeholder" />
                        <text class="currency">CNY</text>
                    </view>
                </view>
            </view>
    
            <!-- 收款方式 -->
            <view class="card" style="margin-top: 20rpx;">
                <view class="row-title" style="display: flex;align-items: center;">
                    <text style="flex: 1;">收款方式</text>
                    <text class="hint" @click="handelSelectBanks">中国农业银行(6228****446)</text>
                    <image style="width: 24rpx;height: 24rpx;" @click="handelSelectBanks" src="../../static/img/back_icon.png" mode="scaleToFill" />
                </view>
                <!-- 邮箱 -->
                <view class="section">
                    <view class="flex-row">
                        <text class="currency">邮箱</text>
                        <input class="form-input" style="padding-left:36rpx;" placeholder="请输入邮箱" placeholder-class="placeholder" />
                    </view>
                </view>
            </view>
    
            <view class="tips">
                <view>1: 收款方式 必须绑定自己名下银行卡信息。</view>
                <view>2: 必须填写正确的邮箱，以便接收凭证。</view>
                <view>3: 收到买家款项后，请在30分钟内释放USDT，超时平台将递过人工智能帮您处理。</view>
            </view>
    
            <view class="submit-btn" @click="handelClickConfirm">确定出售</view>
        </view>
    
        <view v-show="active == 2" style="flex: 1;">
            <load-refresh ref="loadRefresh" :isRefresh="true" heightReduce="200" refreshType="hollowDots" color="#04C4C4"  backgroundCover="#F3F5F5" :currentPage="currentPage" :totalPages="totalPages" @loadMore="loadMore" @refresh="refresh">
                <view slot="content-list">
                    <card />
                    <card />
                    <!-- <card />
                    <card />
                    <card />
                    <card />
                    <card /> -->
                </view>
            </load-refresh>
        </view>
    
        <uni-popup ref="payFrom" type="bottom">
            <view style="padding: 42rpx 34rpx 74rpx 38rpx;background: #fff;border-radius: 40rpx 40rpx 0 0;">
                <view class="popup-header">
                    <text class="popup-title">购买</text>
                    <image @click="$refs.payFrom.close()" class="popup-close" src="../../static/img/back_icon.png" mode="scaleToFill" />
                </view>
    
                <view style="display: flex;margin-top: 48rpx;">
                    <text class="text" style="flex: 1;">单价</text>
                    <text class="text">USDT数量</text>
                </view>
                <view style="display: flex;">
                    <text class="text" style="flex: 1;font-weight: 500;color: #333333;">¥7.74</text>
                    <text class="text" style="font-weight: 500;color: #333333">34335.55</text>
                </view>
                <view class="text" style="margin-bottom: 20rpx;">按数量购买</view>
                <view class="section">
                    <view class="flex-row">
                        <input class="form-input" style="font-size: 32rpx;font-weight: 500;" type="number" maxlength="10" placeholder="0.00" />
                        <view class="flex-between">
                            <text class="currency">USDT</text>
                            <text class="currency" style="color: #E7E8EB;"> ｜ </text>
                            <text class="currency" style="color: #FF5023;">最大</text>
                        </view>
                    </view>
                </view>
                <view class="text" style="font-size: 26rpx;margin-top: 28rpx;">限额：<text style="color: #FC4300;">3000.00-5000.00</text> USDT</view>
                <view class="text" style="font-weight: 500;font-size: 32rpx;color: #666666;text-align: center;margin-top: 82rpx;margin-bottom: 56rpx;">
                    应付｜<text style="color: #FF4C1E;">45455.66 CNY</text></view>
                <view style="margin-top: 0;" class="submit-btn" @click="handelClickConfirm">确定出售</view>
            </view>
        </uni-popup>
    
    
        <uni-popup ref="banks-sheet" type="bottom">
            <view style="padding: 42rpx 34rpx 74rpx 38rpx;background: #fff;border-radius: 40rpx 40rpx 0 0;">
                <view class="popup-header" style="margin-bottom: 20rpx;">
                    <text class="popup-title">选择银行</text>
                    <image @click="$refs['banks-sheet'].close()" class="popup-close" src="../../static/img/back_icon.png" mode="scaleToFill" />
                </view>
                <view v-for="item in [1, 2, 3, 4]" :key="item" class="sheet-item" :class="item == 1 ? 'sheet-active' : ''">
                    中国农业银行(6228****446)</view>
                <view class="sheet-item" @click="$refs['banks-sheet'].close()">取消</view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import loadRefresh from '@/components/load-refresh/load-refresh.vue';
import card from '@/components/card.vue';
export default {
    components: {
        loadRefresh,
        card
    },
    data() {
        return {
            active: 0
        };
    },
    created() {
        uni.$uv.http.post('/c2c/findBuyableOrderByPage', {pageNum: 1,pageSize: 10}).then(res => {
            console.log(res);
        });
    },
    mounted() {

    },
    methods: {
        handelClickPay(){
            this.$refs.payFrom.open();
        },
        loadMore() {
            console.log('loadMore');
        },
        refresh() {
            console.log('upper');
        },
        handelClickConfirm() {
            // this.$refs.popup.open();
            // console.log(this.$refs.popup);
        },
        handelSelectBanks() {
            this.$refs['banks-sheet'].open();
        }
    },
}
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    padding: 42rpx 22rpx 46rpx 18rpx;
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    overflow-y: scroll;
    background: #F8F9FD;
}

.tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 84rpx;
}

.card {
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 24rpx 24rpx 60rpx 24rpx;
}

.row-title {
    display: block;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    margin: 28rpx 0 24rpx 0;
}

.flex-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 8rpx;
}

.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 656rpx;
    height: 84rpx;
    background: #F8F9FD;
    border-radius: 8rpx;
    border: 2rpx solid #DDDDDD;
    padding: 0 32rpx 0 20rpx;
    box-sizing: border-box;
    line-height: 84rpx;
}

.form-input {
    flex: 1;
    height: 84rpx;
    font-size: 26rpx;
    line-height: 84rpx;
    color: #999999;
}

.currency {
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
}

.hint {
    color: #999999;
}

.tips {
    margin-top: 28rpx;
    padding: 0 34rpx 0 0 34rpx;
    font-size: 26rpx;
    color: #666666;
    line-height: 42rpx;
}

.submit-btn {
    margin: 94rpx auto 48rpx;
    width: 648rpx;
    height: 104rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;
    line-height: 104rpx;
    text-shadow: 0px 6px 12px rgba(54, 98, 240, 0.37);
    text-align: center;
    background: linear-gradient(173deg, #242E6B 0%, #0062C5 53%, #0F3665 100%);
    box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(54, 98, 240, 0.37);
    border-radius: 52rpx;
}

.popup-header {
    position: relative;
    height: 50rpx;
}

.popup-title {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    font-weight: 500;
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
}

.popup-close {
    position: absolute;
    z-index: 99;
    right: 0;
    width: 44rpx;
    height: 44rpx;
    background: red;
}

.text {
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
    margin: 6rpx 0;
}

.sheet-item {
    height: 84rpx;
    text-align: center;
    margin: 24rpx auto;
    line-height: 84rpx;
    font-size: 36rpx;
    width: 100%;
    border-radius: 14rpx;
    color: #FFFFFF;
    background: #DDDDDD;
}

.sheet-active {
    background: #242E6B;
    color: #FFFFFF;
}

.list {
    width: 100%;
    background: #FFFFFF;
    border-radius: 16rpx;
    margin: 20rpx auto;
    padding: 22rpx 24rpx;
    box-sizing: border-box;
}

.lable {
    display: inline-block;
    font-size: 20rpx;
    color: #666666;
    line-height: 28rpx;
    padding: 4rpx 18rpx;
    background: #F4F4F4;
    margin-right: 16rpx;
}

.pay-btn {
    width: 156rpx;
    height: 68rpx;
    line-height: 68rpx;
    background: #37B982;
    border-radius: 40rpx;
    text-align: center;
    color: #fff;
    font-weight: 500;
    font-size: 28rpx;
}
</style>